<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="../css/mui.min.css" />
		<link type="text/css" rel="stylesheet" href="../css/waterfall.view.css" />
	</head>

	<body>
		<!-- <header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">两列图片瀑布流</h1>
		</header> -->
		<div class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll imgs-box" init="true">
				<div class="two-ranked-box">
					<ul class="box-left"></ul>
					<ul class="box-right"></ul>
				</div>
			</div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	
	<script type="text/javascript">
		mui.init();
		//模拟瀑布流JSON数据
		var waterfallData = [
			{ id: "img1", name: '蝴蝶', details: '蝴蝶蝴蝶蝴蝶', src: '../images/waterfall/butterfly.jpg' },
			{ id: "img2", name: '锦鸡', details: '锦鸡锦鸡', src: '../images/waterfall/bird.jpg' },
			{ id: "img3", name: '罕见麻雀', details: '罕见麻雀罕见麻雀罕见麻雀', src: '../images/waterfall/animal3.jpg' },
			{ id: "img4", name: '白鹤', details: '白鹤白鹤白鹤', src: '../images/waterfall/crane.jpg' },
			{ id: "img5", name: '柴犬', details: '柴犬', src: '../images/waterfall/dog.jpg' },
			{ id: "img6", name: '长颈鹿', details: '长颈鹿', src: '../images/waterfall/giraffe.jpg' },
			{ id: "img7", name: '猎豹', details: '猎豹', src: '../images/waterfall/leopard.jpg' },
			{ id: "img8", name: '大熊猫', details: '大熊猫', src: '../images/waterfall/panda.jpg' },
			{ id: "img9", name: '兔子狗', details: '兔子狗兔子狗', src: '../images/waterfall/pika.jpg' },
			{ id: "img0", name: '北极熊', details: '北极熊', src: '../images/waterfall/polar-bear.jpg' },
			{ id: "img10", name: '狐猴', details: '狐猴', src: '../images/waterfall/raccoon.jpg' }
		]
		
		renderImages(document.querySelector('.mui-scroll.imgs-box'), waterfallData);
		
		mui(".mui-scroll-wrapper").scroll();
		
		/**
		 * 渲染瀑布流图片
		 * @param {Object} ele   瀑布流所在容器的dom元素
		 * @param {Object} data  瀑布流图片数据
		 */
		function renderImages(ele, data) {
			var i = 0
			var init = ele.getAttribute('init')
			if ('true' == init) {
				ele.querySelector('.box-left').innerHTML = '';
				ele.querySelector('.box-right').innerHTML = '';
			}
			//模拟数据导入
			loadNext();
			function loadNext() {
				var boxLeft = ele.querySelector('.box-left')
				var boxRight = ele.querySelector('.box-right')
				var html = '<li class="img-item" onclick="toImgInfo(\'' + data[i].id + '\')">'
						+ '<p class="product-picture"><img src="' + data[i].src + '"></p>'  
						+ '<p class="product-np">' + data[i].name + '</p>'
						// + '<p class="product-ie">' + data[i].details + '</p>'
						+ '</li>';
				
				if (boxLeft.scrollHeight < boxRight.scrollHeight) {
					boxLeft.innerHTML += html
				} else {
					boxRight.innerHTML += html
				}
				// 使用一定时间间隔再加载下一张  保证两列瀑布流图片分布一致
				// 尽量避免使用for循环直接渲染 除非网络状况十分十分的好或只是加载本地图片  否则会出现一边空白一边加载了很多张的情况
				var interval = setInterval(function() {
					i++;
					if (i < data.length) {
						loadNext();
					} else {
						clearInterval(interval)
					}
				}, 150); // 这是延时时间根据实际网络状况调整  当然是越小越好，代表网络越好
			}
		}
	</script>

</html>
